<template>
  <div class="page">
    <div class="container">
      <!-- <div class="header">
        <div class="alogo">
          <img style="height: 56px;" :src="userStore.loginlogoimg()" />
        </div>
      </div> -->
      <div class="main">
        <LoginForm />
      </div>
      <!-- <div class="footer">138FOT.COM</div> -->
    </div>
  </div>
</template>
<script setup>
import LoginForm from './components/LoginForm.vue'

const userStore = useUserStore()
</script>
<style lang="scss" scoped>
.page {
  background: url('@/assets/login/bg.png');
  background-size: cover;
  // width: 100wh;
  height: 100vh;
  display: flex;
  justify-content: center;
  position: relative;
}

.container {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 2;
}

.main {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.footer {
  position: fixed;
  left: 0;
  bottom: 32px;
  width: 100%;
  text-align: center;
  font-size: 12px;
  color: rgba($color: #ffffff, $alpha: 0.7);
}
</style>
